<template>
  <view class="ai-tutor-container">
    <!-- 顶部标题 -->
    <view class="top-nav">
      <view class="nav-item active">
        <text class="nav-text">AI导师</text>
      </view>
    </view>

    <!-- AI导师内容 -->
    <view class="content-area">
      <!-- Logo区域 -->
      <view class="logo-container">
        <image class="logo-image" src="../../static/logo/think.png" mode="aspectFill"></image>
      </view>

      <!-- 问候语 -->
      <view class="greeting-text">
        <text>你好啊，用户xxx先生/女士</text>
      </view>

      <!-- 健康主题介绍 -->
      <view class="health-intro">
        <text>卫生健康问题、个人状况分析、养生小知识</text>
        <text>包括为您定制调理相关的安排</text>
        <text>都尽管向晓安导师提问哦OvO</text>
      </view>

      <!-- 服务器状态提示已移除 -->

      <!-- 对话区域 -->
      <view class="chat-area">
        <view v-for="(message, index) in messages" :key="index"
          :class="['chat-message', message.type === 'user' ? 'user-message' : 'system-message']">
          <text>{{ message.content }}</text>
        </view>
        <view v-if="isLoading" class="chat-message system-message loading-message">
          <text>正在思考中...</text>
        </view>
      </view>

      <!-- 用户输入框 -->
      <view class="user-input-area">
        <input type="text" class="chat-input" placeholder="请输入你的问题..." v-model="userInput" :disabled="isLoading" />
        <view class="send-btn" @click="sendMessage" :class="{ 'disabled': isLoading || !userInput.trim() }">
          <text class="send-icon">发送</text>
        </view>
      </view>
    </view>

    <!-- 调理安排内容已移至独立页面 -->
    <!-- 底部导航栏由pages.json的tabBar配置自动生成 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInput: '',
      messages: [
        {
          content: '养生是一件要坚持的事情哟！有什么我可以帮助您的吗？',
          type: 'system'
        }
      ],
      currentTab: 'ai', // 默认显示AI导师内容
      isLoading: false,
      sessionId: null,
      serverStatus: 'checking', // 服务器状态字段保留但不显示给用户
      serverStartAttempts: 0
    }
  },
  created() {
    // 初始化会话ID
    this.sessionId = this.generateUUID();
    // 后台静默检查和启动后端服务器
    this.silentCheckAndStartServer();
  },
  methods: {
    // 静默检查并启动后端服务器（不显示给用户）
    async silentCheckAndStartServer() {
      // 内部状态追踪仍保留
      this.serverStatus = 'checking';

      try {
        // 仅在控制台输出信息，不显示给用户
        console.log('后台检查服务连接状态...');
        // 尝试连接API的健康检查端点
        const response = await fetch('http://localhost:8000/api/health', {
          method: 'GET'
        });

        if (response.ok) {
          console.log('后端服务连接正常');
          this.serverStatus = 'running';
        } else {
          throw new Error('服务连接异常');
        }
      } catch (error) {
        console.log('服务连接失败，尝试后台启动...');
        this.serverStatus = 'starting';

        // 启动后端服务器
        await this.startBackendServer();
      }
    },

    // 启动后端服务器（保持逻辑但不显示状态）
    async startBackendServer() {
      if (this.serverStartAttempts >= 2) {
        console.log('后台服务启动尝试失败');
        this.serverStatus = 'failed';
        return;
      }

      this.serverStartAttempts++;

      try {
        console.log('尝试后台启动服务...');

        // 尝试方法1：通过创建隐藏的iframe来执行命令（适用于H5）
        if (document && document.body) {
          const cmdUrl = `cmd://start cmd /k cd /d M:\\Programme\\FastAPIProject\\Ahna\\my-fastapi-project && python -m uvicorn apps.api:app --host localhost --port 8000`;

          // 创建一个隐藏的iframe来执行命令
          const iframe = document.createElement('iframe');
          iframe.style.display = 'none';
          iframe.src = cmdUrl;
          document.body.appendChild(iframe);

          // 5秒后移除iframe
          setTimeout(() => {
            if (iframe && iframe.parentNode) {
              iframe.parentNode.removeChild(iframe);
            }
          }, 5000);

          // 等待服务器启动
          setTimeout(() => {
            this.verifyServerRunning();
          }, 5000);

          return;
        }

        // 尝试方法2：在小程序中使用uni.saveFile将命令保存为批处理文件并执行
        // 注意：这种方法可能受到小程序安全限制
        if (uni && uni.getSystemInfoSync().platform === 'windows') {
          // 创建启动脚本
          const scriptContent = `
            @echo off
            cd /d M:\\Programme\\FastAPIProject\\Ahna\\my-fastapi-project
            python -m uvicorn apps.api:app --host localhost --port 8000
          `;

          // 将脚本内容转换为Blob
          const blob = new Blob([scriptContent], { type: 'text/plain' });
          const url = URL.createObjectURL(blob);

          // 下载脚本文件（但不显示提示）
          uni.downloadFile({
            url: url,
            success: (res) => {
              if (res.statusCode === 200) {
                console.log('启动脚本已准备好');
                // 不再显示弹窗提示
              }
            },
            fail: () => {
              console.error('无法创建启动脚本');
              this.serverStatus = 'failed';
            }
          });

          // 清理URL对象
          URL.revokeObjectURL(url);

          // 等待服务器启动
          setTimeout(() => {
            this.verifyServerRunning();
          }, 10000);

          return;
        }

        // 如果以上方法都不可用，静默记录但不提醒用户
        console.log('无法自动启动后端服务，将使用本地模拟响应');
        this.serverStatus = 'failed';
      } catch (e) {
        console.error('启动服务失败:', e);
        this.serverStatus = 'failed';
      }
    },

    // 验证服务器是否成功启动（不显示状态）
    async verifyServerRunning() {
      try {
        const response = await fetch('http://localhost:8000/api/health');
        if (response.ok) {
          console.log('服务连接已建立');
          this.serverStatus = 'running';
        } else {
          throw new Error('服务连接异常');
        }
      } catch (error) {
        console.error('服务连接验证失败:', error);
        this.serverStatus = 'failed';
      }
    },

    // 生成UUID
    generateUUID() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
      });
    },

    // 发送消息方法
    async sendMessage() {
      if (this.userInput.trim() && !this.isLoading) {
        const userMessage = this.userInput.trim();

        // 添加用户消息
        this.messages.push({
          content: userMessage,
          type: 'user'
        });

        // 清空输入框
        this.userInput = '';

        // 设置加载状态
        this.isLoading = true;

        try {
          // 调用后端API
          const response = await this.callChatAPI(userMessage);

          // 添加AI回复
          this.messages.push({
            content: response.content,
            type: 'system'
          });
        } catch (error) {
          console.error('调用AI接口出错:', error);
          // 添加错误消息
          this.messages.push({
            content: '抱歉，我遇到了一些问题，请稍后再试。',
            type: 'system'
          });
        } finally {
          // 取消加载状态
          this.isLoading = false;
        }
      }
    },

    // 调用聊天API
    async callChatAPI(message) {
      try {
        console.log('正在发送消息到API:', message);

        // 测试模式：如果连接API失败，使用模拟响应
        let useMockResponse = false;
        let mockResponse = null;

        try {
          const testConnection = await fetch('http://localhost:8000/api/chat', { method: 'OPTIONS' });
          console.log('API连接测试:', testConnection.status);
        } catch (e) {
          console.log('API连接失败，将使用模拟响应');
          useMockResponse = true;
          mockResponse = this.getMockResponse(message);
        }

        if (useMockResponse) {
          console.log('使用模拟响应:', mockResponse);
          return { content: mockResponse, session_id: this.sessionId };
        }

        const response = await fetch('http://localhost:8000/api/chat', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            message: message,
            session_id: this.sessionId
          })
        });

        console.log('API状态码:', response.status);

        if (!response.ok) {
          const errorText = await response.text();
          console.error('API错误响应:', errorText);
          throw new Error(`HTTP错误! 状态: ${response.status}, 内容: ${errorText}`);
        }

        const data = await response.json();
        console.log('API响应数据:', data);
        return data;
      } catch (error) {
        console.error('API请求失败:', error);
        // 如果API请求失败，返回模拟响应
        const mockResponse = this.getMockResponse(message);
        console.log('使用备用模拟响应:', mockResponse);
        return { content: mockResponse, session_id: this.sessionId };
      }
    },

    // 生成模拟响应
    getMockResponse(message) {
      const responses = {
        '你好': '你好！我是晓安，很高兴为您服务。您今天感觉如何？',
        '今天天气': '抱歉，我无法获取实时天气信息。不过，无论天气如何，保持心情愉快和健康的生活习惯都很重要！',
        '我头疼': '头疼可能由多种原因引起，如压力、疲劳、脱水或眼睛疲劳。建议您休息一下，喝些水，如果症状持续，最好咨询医生。',
        '养生建议': '日常养生建议：1)保持规律作息 2)均衡饮食 3)适量运动 4)充分休息 5)心态平和 6)多喝水少熬夜',
        '如何减肥': '健康减肥需要均衡饮食和规律运动。控制热量摄入，增加蔬果摄入，每周进行150分钟中等强度有氧运动，同时加入力量训练。记住，健康减肥是一个循序渐进的过程。',
        '血压高': '高血压需要关注饮食和生活习惯。建议限制盐分摄入，减少加工食品，保持健康体重，规律运动，限制酒精摄入，不吸烟，并定期监测血压。请遵医嘱服药。',
        '失眠': '改善失眠建议：保持规律作息，睡前避免使用电子设备，创造舒适睡眠环境，睡前可以做些放松活动如阅读或冥想，避免睡前摄入咖啡因和大量食物。'
      };

      // 查找匹配的关键词
      for (const key in responses) {
        if (message.includes(key)) {
          return responses[key];
        }
      }

      // 默认响应
      return '我是您的健康顾问晓安。我可以提供养生建议、健康生活指导和简单的健康问题咨询。请问有什么我可以帮助您的吗？';
    }
  }
}
</script>

<style lang="scss">
/* 定义颜色变量 */
$duolingo-green: #58cc02;
$duolingo-blue: #1cb0f6;
$duolingo-purple: #ce82ff;
$duolingo-orange: #ff9600;
$duolingo-red: #ff4b4b;
$duolingo-light-gray: #f7f7f7;
$duolingo-dark-gray: #4b4b4b;

.ai-tutor-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #fff;
  position: relative;
  padding-bottom: 120rpx;
}

/* 顶部导航栏样式 */
.top-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 0;
  background-color: #fff;
}

.nav-item {
  padding: 10rpx 20rpx;
  position: relative;
}

.nav-text {
  font-size: 32rpx;
  color: #4b4b4b;
}

.nav-item.active .nav-text {
  color: #58cc02;
  font-weight: bold;
}

.nav-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 4rpx;
  background-color: #58cc02;
  transition: all 0.3s;
  transform: translateX(0);
}

.nav-item:last-child.active~.nav-indicator {
  transform: translateX(100%);
}

/* 中间内容区域样式 */
.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 30rpx;
  background-color: #fff;
}

/* Logo样式 */
.logo-container {
  width: 240rpx;
  height: 240rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 4rpx solid #58cc02;
  margin: 20rpx 0 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.logo-image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* 问候语样式 */
.greeting-text {
  font-size: 36rpx;
  color: #4b4b4b;
  margin-bottom: 30rpx;
  text-align: center;
  font-weight: bold;
}

/* 健康主题介绍样式 */
.health-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
  background-color: #f7f7f7;
  padding: 30rpx;
  border-radius: 20rpx;
  width: 90%;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.health-intro text {
  font-size: 28rpx;
  color: #4b4b4b;
  line-height: 1.6;
  text-align: center;
}

/* 服务器状态提示样式 - 保留但不使用 */
.server-status {
  display: none;
  /* 隐藏所有服务器状态提示 */
}

/* 聊天区域样式 */
.chat-area {
  width: 100%;
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
}

.chat-message {
  max-width: 80%;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  font-size: 28rpx;
  line-height: 1.5;
  position: relative;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10rpx);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.system-message {
  align-self: flex-start;
  background-color: #f7f7f7;
  color: #4b4b4b;
  border-bottom-left-radius: 4rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  border-left: 8rpx solid #1cb0f6;
}

.user-message {
  align-self: flex-end;
  background-color: #58cc02;
  color: white;
  border-bottom-right-radius: 4rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

/* 用户输入区域样式 */
.user-input-area {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  padding: 20rpx;
  background-color: #f7f7f7;
  border-top: 2rpx solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.05);
  border-radius: 20rpx 20rpx 0 0;
  margin-top: auto;
}

.chat-input {
  flex: 1;
  height: 80rpx;
  background-color: #ffffff;
  border-radius: 40rpx;
  padding: 0 120rpx 0 30rpx;
  font-size: 28rpx;
  color: #4b4b4b;
  border: 2rpx solid #1cb0f6;
  box-shadow: inset 0 2rpx 5rpx rgba(0, 0, 0, 0.05);
}

.send-btn {
  position: absolute;
  right: 30rpx;
  width: 100rpx;
  height: 60rpx;
  border-radius: 30rpx;
  background-color: #58cc02;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.send-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
}

.send-icon {
  font-size: 28rpx;
  color: #ffffff;
  font-weight: bold;
}

/* 空白调理安排页面样式 */
.empty-treatment-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80vh;
  background-color: #f7f7f7;
  border-radius: 20rpx;
  margin: 30rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.empty-text {
  font-size: 32rpx;
  color: #4b4b4b;
  text-align: center;
  font-weight: bold;
}

/* 底部导航栏样式 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #ffffff;
  height: 120rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  border-top: 2rpx solid #f7f7f7;
}

.bottom-nav .nav-text {
  font-size: 24rpx;
  color: #4b4b4b;
}

.bottom-nav .nav-item.active .nav-text {
  color: #58cc02;
  font-weight: bold;
}

.feature-shortcuts {
  width: 100%;
  padding: 20rpx;
  margin-bottom: 30rpx;
}

.shortcut-btn {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #f7f7f7;
  border-radius: 15rpx;
  margin-bottom: 15rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.shortcut-btn:active {
  transform: scale(0.98);
  box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.1);
}

.shortcut-icon {
  font-size: 40rpx;
  margin-right: 20rpx;
}

.shortcut-text {
  font-size: 28rpx;
  color: #4b4b4b;
  font-weight: bold;
}

.loading-message {
  background-color: #f7f7f7;
  color: #4b4b4b;
  opacity: 0.7;
}

.send-btn.disabled {
  background-color: #f7f7f7;
  cursor: not-allowed;
}
</style>